<template>
  <div class="list">
    <div class="goods-top">
      <div class="top-back" @click="backhome">
        <img src="@/assets/back.png" alt="" />
        <p>返回</p>
      </div>
      <p>分类</p>
    </div>
    <van-tabs @click="tabEvents" v-model="active">
      <van-tab v-for="item in tabList" :key="item.id" :title="item.name">
      </van-tab>
    </van-tabs>

    <div class="list-content">
      <div class="content-title">
        <p class="tabname">{{ tabname }}</p>
        <p class="front_name">{{ tab_front_name }}</p>
      </div>
      <div class="content-item">
        <div
          class="item-box"
          v-for="item in tabItem"
          :key="item.id"
          @click="goGoodsdetail(item.id)"
        >
          <img :src="item.list_pic_url" alt="" />
          <p class="box-name">{{ item.name }}</p>
          <p class="box-price">￥{{ item.retail_price }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { indexaction } from "@/api/category/index";
import { goodsList } from "@/api/home/list/index";
export default {
  name: "Index",

  data() {
    return {
      tabList: [],
      tabItem: [],
      tabname: "",
      tab_front_name: "",
      active: 0,
    };
  },

  created() {
    if (this.$route.query.boxid) {
      goodsList({
        categoryId: this.$route.query.boxid,
      }).then((res) => {
        this.tabList = res.categoryList;
      });
    } else {
      indexaction().then((res) => {
        this.tabList = res.categoryList;
        this.active = this.tabList.findIndex((ele) => {
          return ele.id == this.$route.query.id;
        });
      });
    }

    if (this.$route.query.id) {
      goodsList({
        categoryId: this.$route.query.id,
      }).then((res) => {
        // console.log(res);
        this.tabItem = res.data;
        this.tabname = res.currentNav.name;
        this.tab_front_name = res.currentNav.front_name;
      });
    }
  },

  mounted() {},

  methods: {
    tabEvents(val) {
      goodsList({
        categoryId: this.tabList[val].id,
      }).then((res) => {
        this.tabItem = res.data;
        this.tabname = res.currentNav.name;
        this.tab_front_name = res.currentNav.front_name;
      });
    },
    backhome() {
      this.$router.go(-1);
    },

    goGoodsdetail(val) {
      this.$router.push({
        name: "categoryGoodsdetail",
        query: {
          id: val,
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
@import "../scss/list/index.scss";
* {
  margin: 0;
  padding: 0;
}
</style>